<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> 管理员 </title>
    <link rel="stylesheet" href="./管理员界面.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> <!--此处为了使用图库进行引用 -->
    <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3875222_srcgkgfw0al.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
    <div class="Father">
    <div class="HomeContent">
            <i class='bx bx-menu' style="position: relative;left:-100px;"></i>
            <span class="text" style="position: relative;left: -200px;">首页&nbsp;&nbsp;&nbsp;消息</span>
            <div class="Searchbox">
                <input type="search" name="" placeholder="哈哈" id="search-box">
                <label for="search-box" class="fas fa-search"></label>
                <img src="" alt="">
            </div>
            <div class="NamePhoto">
                <div class="Center">
                    <a
                        href="http://127.0.0.1:5500/%E5%9B%BE%E4%B9%A6%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F%E5%89%8D%E7%AB%AF/%E4%B8%AA%E4%BA%BA%E7%95%8C%E9%9D%A2(%E7%94%A8%E6%88%B7)/user-index.html">
                        <span class="text">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp管理员</span></a>
                </div>
                <span>&nbsp&nbsp&nbsp&nbsp</span>
                <i class='bx bxs-ghost' onclick="window.open('admin-index.html','_self')" ></i>
            </div>
    </div>
    <div class="CenterBackground">
    <div class="Sidebar">
        <div class="LogoDetails">
            <i class='bx bx-book-open'></i>
            <span class="LogoName">云顶图书馆</span>
        </div>
        <ul class="NavLinks">

            <li><a href="#">
                    <button class="NavLinks2">
                        <i class='iconfont icon-read'></i>
                        <span class="LinkName">图书库</span>
                    </button></a>
            </li>
            <li>
                
                    <a href="#"><button class="NavLinks1">

                            <i class="iconfont icon-noread"></i>
                            <span class="LinkName">图书库</span>
                        </button></a>
                
            </li>
            

        </ul>
    </div>
    <div class="HomeSection">
        <div class="BookShowing">
            <div class="BookTop"><h1>欢迎来到图书库，这里是新世界</h1></div>
            <div class="Searching">
              <div class="SearchBook">
                <div class="icons"></div>
                  <div class="InputBook">
                    <input type="text" id="mysearch" placeholder="Search">
                  </div>
                  <span class="Clear" onclick="document.getElementById('mysearch').value = '' "></span>
                </div>
              </div>
              <div class="Function">
                <div class="FunctionButton">
                <button onclick="popBox()" id="SearchBt">增加图书</button>
                <button onclick="pop2Box()"> 编辑图书</button>
                <button onclick="pop3Box()" id="delbook">删除图书</button>
                </div>
              </div>
            <table cellspacing="0" class="Table">
              <thead>
                  <tr>
                      <th>书图</th>
                      <th>书名</th>
                      <th>类别</th>
                      <th>作者</th>
                      
                      <th>简介</th>
                      <th>剩余量</th>
                      <th>详情</th>   
                  </tr>
              </thead>
              <tbody>
              </tbody>
            </table>  
    </div>
    <div id="popLayer"></div>

    <div id="popBox">
            <div class="close">

        <a href="javascript:void(0)" onclick="closeBox()"><span>关闭</span></a>
    </div>
 
    <div class="content">
         <div class="input"><span>书籍图片：</span><input id="picture"></input></div>
        <div class="input"><span>书名：</span><input id="bookName"></input></div>
        <div class="input"><span>类别：</span><input id="category"></input></div>
        <div class="input"><span>作者：</span><input id="author"></input></div>
        <div class="input"><span>数量：</span><input id="amount"></input></div>
        <div class="drop"><button id="drop1"onclick="closeBox()">提交</button></div>
        </div>
    </div>
     
     <div id="pop2Box">
            <div class="close">

        <a href="javascript:void(0)" onclick="closeBox()"><span>关闭</span></a>
    </div>
 
    <div class="content">
        
        <div class="input"><span>书籍图片：</span><input id="picture1"></input></div>
        <div class="input"><span>书名：</span><input id="bookName1"></input></div>
        <div class="input"><span>类别：</span><input id="category1"></input></div>
        <div class="input"><span>作者：</span><input id="author1"></input></div>
        <div class="input"><span>数量：</span><input id="amount1"></input></div>
        
        <div class="drop"><button id="drop2"onclick="closeBox()">提交</button></div>
        </div>
    </div>

    <div id="pop3Box">
            <div class="close">

        <a href="javascript:void(0)" onclick="closeBox()"><span>关闭</span></a>
    </div>
 
    <div class="content">
        <div class="input"><span>书名：</span><input id="DelName"></input></div>
        <div class="drop"><button id="drop3"onclick="closeBox()">提交</button></div>
        </div>
    </div>


    </div>
    
    <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
    <script src="./管理员界面.js"></script>
    <script type="text/javascript">
        /*表格部分的实现*/
  
  /*var datas = [{
    pic:'<img src="https://kisynergy.oss-cn-beijing.aliyuncs.com/book7.png"/ height = 100px > ',
    name: ' 流浪地球',
    sub:'科幻',
    author:'刘慈欣',
    
    des:'人类加油',
    have:'100'},{
      pic:'<img src="https://kisynergy.oss-cn-beijing.aliyuncs.com/book7.png"/ height = 100px > ',
    name: '流浪地球',
    sub:'科幻',
    author:'刘慈欣',
    
    des:'人类加油',
    have:'100'   
    }
    ];
  var tbody = document.querySelector('tbody');
  for (var i = 0; i < datas.length; i++){
    var tr = document.createElement('tr');
    tbody.appendChild(tr);
    for(var k in datas[i]){
      var td = document.createElement('td');
      td.innerHTML = datas[i][k]
      tr.appendChild(td);
    }
     var td = document.createElement('td');
    td.innerHTML = '<button>编辑</button>&nbsp&nbsp<button>删除</button>';
    tr.appendChild(td);
  }*/
   //表格部分的再次实现
        var tbody = document.querySelector('tbody');
  window.addEventListener('load',function(){
        axios.defaults.baseURL = 'http://4n4zfk.natappfree.cc/yunchenbooksmanagementsystem_war/';
        axios(
        {
            url:'GetAllBookServlet',
            method:'GET'
        }).then(({data})=>{
            console.log(data);
            var datas = data;
            let htmlStr = ``;
            data.forEach((ele,index)=>{
                htmlStr +=`<tr>
                <td><img src="https://kisynergy.oss-cn-beijing.aliyuncs.com/book7.png"/height = 70px></td>
                <td>${ele.bookName}</td>
                <td>${ele.category}</td>
                <td>${ele.author}</td>
                <td>${ele.introduction}</td>
                <td>${ele.amount}</td>
                <td><button id = "setting">编辑</button>&nbsp&nbsp<button id = "delete">删除</button></td>
                </tr>`
            });
            tbody.innerHTML = htmlStr
            

        })
        
   })

   

 
  //增加图书
    var  SearchBt= document.getElementById("SearchBt");
    var  picture= document.getElementById("picture");
    var  bookName= document.getElementById("bookName");
    var  author= document.getElementById("author");
    var  category= document.getElementById("category");
    var  amount= document.getElementById("amount");
    var  drop1= document.getElementById("drop1");



     //axios.defaults.baseURL = 'http://frp-fly.top:15469/yunchenbooksmanagementsystem_war/';
     drop1.onclick = function(){
        
        axios({
        url:'AddBookServlet',
        method:'POST',
        data:{
            picture:`${picture.value}`,
            bookName:`${bookName.value}`,
            author:`${author.value}`,
            category:`${category.value}`,
           amount:`${amount.value}`
        }
     }).then((res)=>{
        alert(res.data);
        console.log(res);
     })}
     
    //
        function popBox() {
        var popBox = document.getElementById("popBox");
        var popLayer = document.getElementById("popLayer");
        popBox.style.display = "block";
        popLayer.style.display = "block";
        
    };
        function pop2Box() {
        var pop2Box = document.getElementById("pop2Box");
        var popLayer = document.getElementById("popLayer");
        pop2Box.style.display = "block";
        popLayer.style.display = "block";
        
    };
        function pop3Box() {
        var pop3Box = document.getElementById("pop3Box");
        var popLayer = document.getElementById("popLayer");
        pop3Box.style.display = "block";
        popLayer.style.display = "block";
        
    };
     function closeBox() {
        var popBox = document.getElementById("popBox");
        var pop2Box = document.getElementById("pop2Box");
         var pop3Box = document.getElementById("pop3Box");
        var popLayer = document.getElementById("popLayer");
        popBox.style.display = "none";
        pop2Box.style.display = "none";
        pop3Box.style.display = "none";
        popLayer.style.display = "none";
        
    }
   //删除图书
    //axios.defaults.baseURL = 'http://frp-fly.top:15469/yunchenbooksmanagementsystem_war/';
     var  drop3 = document.getElementById("drop3");
     var  DelName = document.getElementById("DelName");
        drop3.onclick = function(){
            alert("删除?");
            axios({
                url:'DelBookServlet',
                method:'POST',
                data:{
                    bookName:`${DelName.value}`
            
                }
            }).then((res)=>{
                alert(res.data);
                console.log(res);
            })
     }
     //修改图书
     //axios.defaults.baseURL = 'http://frp-fly.top:15469/yunchenbooksmanagementsystem_war/';
     var  drop2 = document.getElementById("drop2");
     var  SearchBt1= document.getElementById("SearchBt1");
    var  picture1= document.getElementById("picture1");
    var  bookName1= document.getElementById("bookName1");
    var  author1= document.getElementById("author1");
    var  category1= document.getElementById("category1");
    var  amount1= document.getElementById("amount1");
   
        drop2.onclick = function(){
            alert("编辑？");
            axios({
                url:'UpdateBookServlet',
                method:'POST',
                data:{
                    picture:`${picture1.value}`,
                    bookName:`${bookName1.value}`,
                    author:`${author1.value}`,
                    category:`${category1.value}`,
                    amount:`${amount1.value}`,
            
                }
            }).then((res)=>{
                alert(res.data);
                console.log(res);
            })
     }

    </script>
</body>

</html>